<template id="fu">
    <div class="chat-window center">
      <div class="chat-messages" >
          <div v-for="obj in newsArray" :type="obj.type" :avatar="obj.avatar" :content="obj.content">
        <div class="message received-message" v-if="obj.type == 'received'">
          <div class="message-received"><img :src="obj.avatar" class="avatar"> <span
              class="message-content">{{obj.content}}</span></div>
        </div>
        <div class="message sent-message" v-else>
          <div class="message-sent"><span class="message-content">{{obj.content}}</span> <img :src="obj.avatar"
              class="avatar"></div>
        </div>
      </div>
      </div>
      <zi @ff="ff"></zi>
    </div>
</template>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
<script>
import zi from "@/components/zi.vue";
const fu={
		template:'#fu',
		components:{
			zi
		},
		methods:{
			ff(xx){
				console.log(xx);
				this.newsArray.push({
    "type": "sent",
    "avatar": "images/avt-02.png",
    "content": xx
  })
			},
			loadNewsList(){
				axios.get('data/chat-history.json',{
					
				})
				.then(response =>{
					this.newsArray=response.data;
				})
			}
		},
		data(){
			return{
				newsArray:[]
			}
		},
		created(){
			this.loadNewsList();
		}
	}
  </script>